<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合练习</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
    <div>
        <table border="1">
            <tr>
                <td>照片</td>
                <td><img :src="person.url" width="100">
            </tr>
            <tr>
                <td>姓名:</td>
                <td>{{person.name}}</td>
            </tr>
            <tr>
                <td>年龄:</td>
                <td>{{person.age}}</td>
            </tr>
            <tr>
                <td>好友:</td>
                <td>
                    <ul>
                        <li v-for="name in person.friends">{{name}}</li>
                    </ul>
                </td>
            </tr>
        </table>
        <input type="button" value="加载数据" @click="f()">
    </div>
<script>
    let v= new Vue({
        el:"body>div",
        data:{
            person:{
                name:"",
                age:"",
                url:"",
                friends:[]
            }
        },
        methods:{
            f(){
                v.person= {
                    name : "苍老师",
                    age:30,
                    url : "http://java.tedu.cn/img/202302/1676884975250.jpg",
                    friends: ["貂蝉","武则天","西施"]
                }
            }
        }
    })
</script>
</body>
</html>